<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-select v-model="asset" placeholder="币种">
            <el-option
              v-for="(item, idx) in assetsList"
              :key="idx"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="changes" placeholder="调整资金"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="openCommit">{{$t('message.confirm')}}</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <div class="table">
      <p class="table-title">调整记录</p>
      <p class="item" v-for="(item,idx) in records" :key="idx">{{item}}</p>
    </div>
  </section>
</template>

<script>
import { principalAssets, principal, adjustRecords } from '../api/api'

export default {
  data () {
    return {
      assetsList: [],
      asset: '',
      changes: '',
      tableDataLoading: false,
      records: []
    }
  },
  created () {
    principalAssets().then((res) => {
      if (res.data.code && res.data.code !== 0) {
        this.$message.error(this.$t('获取币种失败'))
        return
      }
      this.assetsList = res.data.result
    }).catch((res) => {
      this.$message.error(this.$t('获取币种失败'))
    })
    this.getRecord()
  },
  methods: {
    getRecord () {
      adjustRecords().then((res) => {
        if (res.data.code && res.data.code !== 0) {
          this.$message.error(this.$t('获取调整记录失败'))
          return
        }
        this.records = res.data.result
      }).catch((res) => {
        this.$message.error(this.$t('获取调整记录失败'))
      })
    },
    principal () {
      principal({asset: this.asset, change: parseFloat(this.changes)}).then((res) => {
        if (res.data.code && res.data.code !== 0) {
          this.$message.error('调整失败')
          return
        }
        this.getRecord()
        this.$message({
          message: '调整成功',
          type: 'success'
        })
      }).catch(() => {
        this.$message.error(this.$t('调整失败'))
      })
    },
    openCommit () {
      this.$confirm(`币种${this.asset}，调整资金${this.changes}，是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.principal()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消调整'
        })
      })
    }
  },
  computed: {
    unit () {
      return this.value
    }
  },
  mounted () {

  }
}

</script>

<style scoped lang="scss">
  .table {
    margin-top: 10px;
    .table-title {
      font-size: 18px;
      color: #a3a3a3;
    }
    .item {
      height: 38px;
      line-height: 24px;
      border-bottom: 1px solid #cccccc;
    }
  }
 .item {
   display: flex;
   justify-content: space-between;
 }
</style>
